/**
 * Created by xcy on 2018/10/30.
 */
import Overlay from 'ol/Overlay';

//点击后高亮下方的feature 并且弹出popup信息做展示
var Popup = function(map ){
    this.map = map ;

    //添加一个popup的div
    var div = document.createElement("div");
    div.id = 'popup';
    div.className='ol-popup';
    /*    div.innerHTML  =  ' <a href="#" id="popup_closer" class="ol-popup-closer"></a>  ' +
            '  <div id="popup_content"><div id="popup_title">title</div></div>  '  ;*/
    div.innerHTML  = '<div id="popup_title"></div>'+
        '<a href="#" id="popup_closer" class="ol-popup-closer"></a>' +
        '<div id="popup_content"></div>';

    document.body.appendChild(div);

    var overlay = new Overlay({
        element:  div,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        } ,
        /* offset:[0,-45]*/
        positioning:'top-center'
    });
    map.addOverlay(overlay);
    //扔到map里 后面方便调用
    this.popup = overlay ;

    document.getElementById('popup_closer').onclick = function() {
        overlay.setPosition(undefined);
        //$('#popup_closer').blur();
        return true;
    };
    this.show=function (_title,_info , _position) {
        document.getElementById('popup_title').innerHTML=_title;
        document.getElementById('popup_content').innerHTML = _info ;
        //设置popup的位置
        this.popup.setPosition(_position);
    };
    this.hide=function () {
        overlay.setPosition(undefined);
    }


};


/**
 * 泡泡显示信息
 * @param _info 气泡内容
 * @param _position 气泡显示的位置 [lon,lat]
 */
Popup.prototype.tooltip = function(_info , _position) {

    document.getElementById('popup_content').innerHTML = _info ;

    //设置popup的位置
    this.popup.setPosition(_position);

};
export default  Popup;
